<template>
	<view v-if="type == 'list'" class="menu-list">
		<view class="menu-item" v-for="(item,index) in menuList" :key="index" @tap="routeHandler(item.targetInfo)">
			<view class="menu-item-left">
				<image :src="item.iconImage" class="menu-item-image" mode="aspectFit"></image>
				<text class="menu-item-text">{{ item.textDescription }}</text>
			</view>
			<view class="menu-item-right"><fa-icon class="icon" color="#999" type="angle-right" size="20"></fa-icon></view>
		</view>
	</view>
	<view v-else-if="type== 'grid'" class="menu-grid">
		<view class="menu-item" v-for="(item, index) in menuList" :key="index" @tap="routeHandler(item.targetInfo)">
			<image class="menu-item-img" :src="item.iconImage" mode="aspectFit"></image>
			<view class="menu-item-text">{{ item.textDescription }}</view>
		</view>
	</view>
</template>

<script>
	import routeUtil from '@/util/routeUtil.js';
	import faIcon from '@/components/kilvn-fa-icon/fa-icon.vue';
	export default{
		components:{faIcon},
		props:{
			type:{
				type: String,
				default: 'list'
			},
			menuList:{
				type:Array,
				default(){
					return []
				}
			}
		},
		methods:{
			routeHandler(e) {
				routeUtil.routeHandler(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 九宫格 */
	.menu-grid{
		width: 90%;
		margin: 0 auto;
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		.menu-item{
			width: 30%;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			padding: 15rpx;
			box-sizing: border-box;
			transition: box-shadow .3s;
			box-shadow: 2rpx 5rpx 8rpx #eee,
			-5rpx -5rpx 8rpx #eee;
			border-radius: 20rpx;
			margin: 10rpx;
			.menu-item-img{
				width: 50%;
			}
			.menu-item-text{
				font-size: 25rpx;
				color: #333;
			}
		}
		.menu-item:active{
			box-shadow: 0 0 0 #eee,
			0 0 0 #eee,
			inset 5rpx 5rpx 8rpx #eee,
			inset -5rpx -5rpx 8rpx #eee;
		}
	}
	/* 列表 */
	.menu-list {
		width: 85%;
		margin: 0 auto;
		margin-top: 10px;
		.menu-item {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;
			.menu-item-left {
				display: flex;
				align-items: center;
				.menu-item-image {
					width: 34rpx;
					height: 34rpx;
				}
				.menu-item-text {
					margin-left: 10px;
					color: #555555;
					font-size: 34rpx;
				}
			}
		}
	}
</style>
